<template>
  <!--导航栏-->
  <el-menu
      :default-active="url !== '/' ? url : '/home'"
      class="el-menu-demo menu"
      mode="horizontal"
      :router="true"
  >
    <el-menu-item index="/home">首页</el-menu-item>
    <el-menu-item index="/books">阅读</el-menu-item>
    <el-menu-item index="/search">查找</el-menu-item>
    <el-menu-item index="/feedback">反馈</el-menu-item>
  </el-menu>

  <!--个人-->
  <div class="userBox">
    <router-link to="/sign" class="sign" v-if="!isLogin">登录注册</router-link>

    <el-dropdown v-if="isLogin" @command="clickItem">
      <img :src="userInfo.header" alt="" class="userHeader">
      <template #dropdown>
        <el-dropdown-menu class="dropdown">
          <el-dropdown-item class="dropdownItem">{{userInfo.name}}</el-dropdown-item>
          <el-dropdown-item class="dropdownItem" divided command="set">设置</el-dropdown-item>
          <el-dropdown-item class="dropdownItem" divided command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>

  <div style="height: 59px;"></div>
</template>

<script setup>
  import {ref} from "vue"
  import {storeToRefs} from "pinia"
  import {useUserStore} from "../config/pinia/user.js"
  import {useRouter} from "vue-router"

  //当前需要激活的导航栏
  const url = ref("/" + window.parent.location.href.split(window.location.host)[1].split("/")[2])

  //用户状态
  const userStore = useUserStore()
  const {userInfo,isLogin} = storeToRefs(userStore)

  //路由器对象
  const router = useRouter()

  //点击下拉菜单项触发
  function clickItem(type){
    switch (type) {
      case "logout" :
        //退出
        userStore.logout()
        break
      case "set" :
        //设置
        router.push({name: "User"})
        break
    }
  }
</script>

<style scoped>
  .menu{
    width: calc(100% - 7.8125vw);
    height: 59px;
    position: fixed;
    top: 0;
    background-color: var(--el-bg-color);
    z-index: 999;
  }
  .userBox{
    width: 7.8125vw;
    min-width: 70px;
    height: 59px;
    padding-right: 2.604vw;
    position: fixed;
    top: 0;
    right: 0;
    color: var(--el-text-color-primary);
    text-align: center;
    border-bottom: 1px solid var(--el-menu-border-color);
    background-color: var(--el-bg-color);
    z-index: 1000;
  }
  .sign{
    color: var(--el-text-color-primary);
    line-height: 59px;
    text-decoration: none;
    display: block;
    width: 70px;
    height: 100%;
  }
  .sign:hover{
    color: var(--el-menu-hover-text-color);
    background-color: var(--el-menu-hover-bg-color);
  }
  .userHeader{
    width: 59px;
    height: 59px;
    border-radius: 50%;
  }
  .userHeader:focus-visible{
    outline: none;
  }
</style>